<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/userCenter.css">
  <style lang="">
    input,
    select {
      margin-top: -7px !important;
      width: 250px !important;
    }

    .none {
      display: none;
    }

    img.headImg {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
    }
  </style>
  <title>个人信息</title>
</head>

<body class="userCenter page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <div>
        <img src="" alt="" class="headImg" onclick="info.openFile()">
      </div>
      <div class="list-block">
        <ul>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">姓名</div>
              <div class="item-after name">
                <input type="text" class="input" onblur="info.changeInput2('userParams','user','name')">
                <div class="div"></div>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">邮箱</div>
              <div class="item-after email">
                <input type="text" class="input" onblur="info.changeInput2('userParams','user','email')">
                <div class="div"></div>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">性别</div>
              <div class="item-after sex">
                <select name="" id="select" class="input" onchange="info.changeInput2('userParams','user','sex')">
                  <option value="1">男</option>
                  <option value="2">女</option>
                </select>
                <div class="div"></div>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">行业</div>
              <div class="item-after jobCategory" onchange="info.changeInput2('userParams','user','jobCategory')">
                <select name="" id="selectJob" class="input">
                </select>
                <div class="div"></div>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">生日</div>
              <div class="item-after birthday">
                <input type="text" class="input" id='date-picker' placeholder="请点击选择时间" onchange="info.changeInput2('userParams','user','birthday')"
                />
                <div class="div"></div>
              </div>
            </div>
          </li>
        </ul>
        <div class="row btn-group" style="margin-top:20px;">
          <div class="col-50">
            <a href="#" class="button button-big button-fill button-info" onclick="info.edit()">编辑</a>
            <a href="#" class="button button-big button-fill button-danger none" onclick="info.cancel()">取消</a>
          </div>
          <div class="col-50">
            <a href="#" class="button button-big button-fill button-success" onclick="info.updateUser()">确认</a>
          </div>
        </div>
      </div>
    </div>

    <div id="modal">
      <input type="file" id="input-file" name="file" onchange="info.changeFile(this)">
      <form id="form-upload" enctype="multipart/form-data">
      </form>

    </div>
    <!-- 标题栏 -->

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var info = (function ($) {

    $.init()
    var info = new ST({
      golbalHeaderText: '个人信息',
      golbalHeaderFunc: function () {
        window.history.back()
      },
      userParams: {
        user: {
          email: '',
          headImg: '',
          name: '',
          sex: '',
          jobCategory: '',
          birthday: ''
        }
      },
      userString: {
        user: ''
      },
      domin: 'http://oboo3djow.bkt.clouddn.com/',
      jobType: ['IT互联网', '文化传媒', '金融法律', '酒店餐饮', '旅游营销', '广告公关', '教育培训', '医疗美容', '文创艺术', '娱乐健身', '制造加工', '地产建筑',
        '贸易零售', '公务服务', '开采冶金', '交通仓储', '农林牧渔', '其他行业'
      ]
    })
    info.form = new FormData($('#form-upload')[0])
    info.jobType.forEach(function (e) { //将工作种类放到option里面
      $('<option />', {
        value: e,
        html: e
      }).appendTo($('#selectJob'))
    })


    info.edit = function () { //编辑的时候 {input框出现，div（显示信息）隐藏，按钮同理}
      $('.input').show()
      $('.div').hide()
      $('.button-danger').removeClass('none')
      $('.button-info').addClass('none')
    }
    info.cancel = function () { //取消的时候与编辑同理，只不过重新请求数据保证显示数据的正确性}
      info.http('getUserInfo')
      $('.input').hide()
      $('.div').show()
      $('.button-danger').addClass('none')
      $('.button-info').removeClass('none')
    }
    info.updateUser = function () { //先选择图片
      if (info.form.get ? info.form.get('token') : info.form.token) {
        info.http('uploadImg')
      } else {
        info.userString.user = JSON.stringify(info.userParams.user)
        info.http('updateUser')
      }
    }
    info.renderSex = function (sex) {
      $('.sex .div').text(sex == 1 ? '男' : '女')
    }
    info.openFile = function () { //时间代理，点击头像则为打开input-file
      $('#input-file').trigger('click')
    }
    info.changeFile = function (context) { //选择图片以后请求上传七牛的token，并在本地显示
      var fileReader = new FileReader();
      fileReader.onload = function (e) {
        $('.headImg').attr('src', e.target.result)
      };
      fileReader.readAsDataURL(context.files[0])
      info.http('getUploadToken')
      info.form.append('file', context.files[0])
    }
    info.pushAjax({
      getUserInfo: {
        url: '/app/api/private/user/baseInfo',
        data: {}
      },
      updateUser: {
        url: '/app/api/private/user/updateUser',
        data: info.userString
      },
      uploadImg: {
        url: 'http://upload.qiniu.com/',
        data: info.form,
        processData: false,
        contentType: false,
        beforeSend: function () {
          $.showPreloader('图片上传中,如等待时间过长，请选择小容量图片,建议1m以内')
        },
        complete: function () {
          $.hidePreloader()
        }
      },
      getUploadToken: {
        url: '/app/api/private/pic/uploadToken',
        data: {}
      }
    })
    info.pushAjaxSuccess({
      getUserInfo: function (res) {
        if (res.code === '1') {
          for (var i in info.userParams.user) {
            info.userParams.user[i] = res.data.user[i]
            $('.' + i + ' .input').val(res.data.user[i])
            if (i === 'sex') {
              info.renderSex(res.data.user[i])
            } else {
              $('.' + i + ' .div').text(res.data.user[i])
            }
            if (i === 'headImg') {
              $('.headImg').attr('src', res.data.user.headImg)
            }
          }
        }
        if (!info.userParams.user.birthday) {
          $('#date-picker').calendar({});
        } else {
          $('#date-picker').calendar({
            value: [info.userParams.user.birthday]
          });
        }
      },
      updateUser: function (res) {
        if (res.code === '1') {
          window.location.reload() //保证form的干净性
        } else {
          $.toast(res.msg)
        }
      },
      uploadImg: function (res) {
        info.userParams.user.headImg = info.domin + res.key
        info.userString.user = JSON.stringify(info.userParams.user)
        info.http('updateUser')
      },
      getUploadToken: function (res) {
        info.form.append('token', res.data.token)
      }
    })
    info.cancel()
    info.render()
    return info
  })($)
</script>

</html>